<template>
   <div class="container">
   	 <v-ginsengNav></v-ginsengNav>
   	 <div class="top">
          <div class="first">
             <span>金种子/冻结余额：</span>
            <p>{{userInfo?userInfo.seeds_amount:0}}/{{userInfo?userInfo.freeze_amount:0}}</p>
            <span>银种子/冻结余额：</span>
            <p>{{userInfo?userInfo.silver_seeds_amount:0}}/{{userInfo?userInfo.silver_freeze_amount:0}}</p>
            <span>铜种子/冻结余额：</span>
            <p>{{userInfo?userInfo.copper_seeds_amount:0}}/{{userInfo?userInfo.copper_freeze_amount:0}}</p>

          </div>
            <div class='first'>  <a href="javascript:;" @click="toRecharge">充值</a></div>
          <div class="sec">
            <span>种子简介：</span>
            <div class="text">
              种子是依托于区块链技术，基于布勒挖参活动产生的奖励，可用于游戏中的消费和兑换等除了日常根据种子大小生长出人参之外，种子数量大于10000的用户有机会获取额外的种子大奖，称之为幸运种子，幸运种子有价值6000、30000、60000BPX的参王，以及价值300、1500、3000的极品参，这些幸运种子可用于兑换BPX
            </div>
          </div>
    </div>
    <div class="bottom">
          <h2>收支记录</h2>
          <div >
          <ul class="tab_head">
             <li>
              <span class='title1'>编号</span>
              <span class='title1'>金种子</span>
              <span class='title1'>银种子</span>
              <span class='title1'>铜种子</span>
              <span class='title2'>时间</span>
              <span class='title2'>描述</span>
            </li>
          </ul>
          <ul class="tab_bot" v-if='list.length>0'>
            <li v-for='(item,index) in list' :key='index'>
              <span class="title1">{{index+1}}</span>
              <span class="title1">{{item.golden_seeds_amount}}个</span>
              <span class="title1">{{item.silver_seeds_amount}}个</span>
               <span class="title1">{{item.copper_seeds_amount}}个</span>
                <span class="title2">{{item.operationTime}}</span>
              <span class="title2">{{item.remark}}</span>
            </li>
          
          </ul>
          </div>
        </div>

   </div>
</template>

<script>
import ginsengNav from "../ginsengNav";
export default {
  name: "ginsengBalance",
  data() {
    return {
      userInfo: u.getStore("userInfo"),
      list: ""
    };
  },
  created() {
    this.balance();
    let timer = setInterval(() => {
      if (u.flag) {
        this.userInfo = u.getStore("userInfo");
        u.expenditure({ phone: u.getStore("user").userid, type: 0 }, data => {
          if (data && data[0] && data[0].list) {
            this.list = data[0].list;
          }
        });
        clearInterval(timer);
      }
    }, 10);
  },
  components: {
    "v-ginsengNav": ginsengNav
  },
  mounted() {
    this.$parent.flag1 = true;
    this.$parent.flag2 = false;
  },
  methods: {
    toRecharge() {
      this.$router.push({ path: "/ginsengRecharge" });
      location.reload();
    },
    balance() {
      //金银铜种子余额
      this.seeds_amount = u.getStore("userInfo").seeds_amount;
      this.silver_seeds_amount = u.getStore("userInfo").silver_seeds_amount;
      this.copper_seeds_amoun = u.getStore("userInfo").copper_seeds_amount;
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100vh;
  padding: 30px 34px 50px 32px;
  background: url(../../../static/image/ginsengbg2.png) no-repeat scroll top
    left;
  background-size: 100% 100%;
}
.tap {
  width: 100% !important;
}
.top {
  width: 100%;
  height: 27%;
  background: url(../../../static/image/ginsengbase1.png) no-repeat scroll top
    left;
  background-size: 100% 100%;
  padding: 2% 3% 19% 4%;
  margin-top: 5%;
  margin-bottom: 3%;
}

.first {
  display: flex;
  flex-direction: row;
  height: 26%;
  flex-wrap: wrap;
}
.first span{
  text-shadow: 0 2px #3a230a, -2px 0 #3a230a, -1px 2px #3a230a, -2px 1px #3a230a;
}
span {
  font-size: 18px;
  line-height: 34px;
  font-family: "MicrosoftYaHei";
  color: #ffffff;
  text-shadow: -2px 2px 1px #3a230a, 2px -2px 1px #3a230a;
  margin-right: 1%;
  white-space: nowrap;
}

.first p {
  font-size: 18px;
  line-height: 34px;
  font-family: "MicrosoftYaHei";
  color: #ffffff;
  text-shadow: 0 2px #a56a2c, -2px 0 #a56a2c, -1px 2px #a56a2c, -2px 1px #a56a2c;
  margin-right: 8%;
}

.first a {
  width: 28%;
  height: 50px;
  background: url(../../../static/image/z_1.png) no-repeat scroll top left;
  background-size: 100% 100%;
  font-size: 24px;
  line-height: 40px;
  text-align: center;
  color: white;
  font-family: "MicrosoftYaHei";
  text-shadow: -2px 3px 3px rgba(134, 7, 0, 0.75),
    2px -2px 1px rgba(134, 7, 0, 0.75);
  margin-top: 14px;
  margin-left: 400px;
}

.sec {
  display: flex;
  flex-direction: column;
  padding-top:2%;
}
.sec span{
  font-size: 18px;
  text-shadow: 0 2px #3a230a, -2px 0 #3a230a, -1px 2px #3a230a, -2px 1px #3a230a;
}
.text {
  height: 173px;
  font-size: 18px;
  line-height: 30px;
  color: #ffffff;
  text-shadow: 0 2px #a56a2c, -2px 0 #a56a2c, -1px 2px #a56a2c, -2px 1px #a56a2c;
  margin-top: 1%;
}
.bottom {
  width: 100%;
  height: 65%;
  background: url(../../../static/image/ginsengbgbot.png) no-repeat scroll top
    left;
  background-size: 100% 100%;
  padding: 3% 3% 5%;
}

.bottom h2 {
  width: 55%;
  height: 96px;
  background: url(../../../static/image/z_3.png) no-repeat scroll top left;
  background-size: 100% 100%;
  text-align: center;
  font-size: 22px;
  line-height: 52px;
  font-family: "MicrosoftYaHei-Bold";
  color: #ffffff;
   text-shadow: 0 2px #1c6b65, -3px 0 #1c6b65, -2px 2px #1c6b65, -3px 1px #1c6b65;
  font-weight: bold;
  margin-left: 23%;
}

.tab_head {
  width: 100%;
  height: 63px;
  background: url(../../../static/image/z_4.png) no-repeat scroll top left;
  background-size: 100% 100%;
  margin-top: 3%;
  margin-bottom: 6%;
}
.tab_head li {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding-top: 2%;
  font-size: 22px;
  text-shadow: 0 2px #a56a2c, -3px 0 #a56a2c, -2px 2px #a56a2c, -3px 1px #a56a2c;
}
.tab_head li span {
  font-weight: bold;
  font-size: 20px;
  font-family: "MicrosoftYaHei-Bold";
  text-shadow: 0 2px #a56a2c, -3px 0 #a56a2c, -2px 2px #a56a2c, -3px 1px #a56a2c;
  text-align: center;
  padding-left:2%;
}
.tab_bot {
  width: 100%;
  height: 377px;
  overflow: auto;
}

.tab_bot li {
  height: 66px;
  background: url(../../../static/image/z_5.png) no-repeat scroll top left;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  font-family: "微软雅黑";
  text-shadow: -2px 1px 1px #3a230a, 2px -1px 1px #3a230a;
  padding-top: 1%;
  margin-bottom: 2%;
}
.tab_bot li span {
  /* margin: auto 6%; */
  text-align: center;
  overflow: hidden;
}

.tab_bot::-webkit-scrollbar {
  width: 10px;
}

.tab_bot::-webkit-scrollbar-track-piece {
  background-color: #ebcf8f;
  -webkit-border-radius: 5px;
}

.tab_bot::-webkit-scrollbar-thumb:vertical {
  background-color: #b6e866;
  -webkit-border-radius: 5px;
}

.title1 {
  width: 10%;
}

.title2 {
  width: 30%;
}

/* .title3 {
  width: 25%;
}

.title4 {
  width: 23%;
}

.title5 {
  width: 38%;
} */
</style>
